{% extends 'base.html' %}
{% load static %}
{% block title %}
    FQA
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
{% endblock %}

{% block style %}
    <style>
        #nav {
            height: 100%;

            width: 100%;
        }

        .wrap {
            margin: 0 auto;
            width: 100%;
        }

        #left {
            width: 15%;
            height: 100%;
            float: left;
            position: fixed;
        }

        #right {
            margin: 0 16% 0 auto;
            width: 60%;
             padding-top: 30px;

        }

        .head {
            margin-bottom: 0;
        }

        #right a {
            white-space: nowrap;
            display: inline-block;
            color: #0000FF;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="wrap">
        <div id="left">
            <ul id="nav" class="layui-nav layui-nav-tree layui-inline"
                lay-filter="nav">
                {% for type in types %}
                    <li class="layui-nav-item">
                        <a href="javascript:;">{{ type.type }}</a>
                        <dl class="layui-nav-child">
                            {% for comm  in type.common.all %}
                                <dd><a href="/common/{{ comm.id }}" title="{{ comm.id }}">{{ comm.title }}</a></dd>
                            {% endfor %}
                        </dl>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div id="right">
            {{ content.first.body|safe }}
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'jquery'], function () {
            var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
                $ = layui.jquery;
            //监听导航点击


            element.on('nav(nav)', function (elem) {
                $(this).on('click', function () {
                    console.log($(this).attr('title'))
                    let pk = $(this).attr('title')
                    $.ajax({
                        type: 'get',
                        url: '/common',
                        data: pk,
                        dataType: 'json',
                        success: function (res) {
                            console.log(res)
                        },
                        error: function (res) {

                        }
                    })
                })
            });

            window.onload = function () {
                let url = window.location.pathname;
                let cutLabel = $("a[href=" + "'" + url + "'" + "]")
                cutLabel.parent().addClass('layui-this');
                cutLabel.parent().parent().parent().addClass('layui-nav-itemed');
            }
        });
    </script>
{% endblock %}